<template>
  <main-toolbar :table-id="tableId" :toolbar-id="toolbarId" :rows="rows" :dark="dark" />
  <main-table :table-id="tableId" :height="tableHeight" :crane-id="craneId" :rows="rows" :dark="dark" />
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue';

import { storeToRefs } from 'pinia';
import { useTableHeight } from 'src/boot/grid';
import { useSearch } from 'src/components/search/hooks';
import { useWebsocket } from 'src/pages/_sys/use-websocket1';
import { headerId, infoId } from '../setup';
import { useTerminalStore } from '../store';
import MainTable from './table.vue';
import MainToolbar from './toolbar.vue';

export default defineComponent({
  name: 'terminal-crane-main',

  components: {
    MainTable,
    MainToolbar,
  },

  props: {
    craneId: {
      type: String,
      required: true,
    },
    isTerminal: {
      type: Boolean,
      required: true,
    },
    dark: {
      type: Boolean,
      required: true,
    },
  },

  setup() {
    const tableId = 'terminal-main-table';
    const toolbarId = 'terminal-main-toolbar';
    const tableHeight = useTableHeight([toolbarId, headerId, infoId], { fixedOffset: 190 });
    const stores = useTerminalStore();
    const { orderType } = storeToRefs(stores);
    const rows = ref<any[]>([]);

    const searchAttrs = ref<Record<string, string>>({ bayNo: '' });

    useSearch(tableId, searchAttrs);

    useWebsocket('CRANE_INDEX_ORDERS', payload => {
      if (payload.topic !== 'CRANE_INDEX_ORDERS') {
        return;
      }

      if (payload.topic === 'CRANE_INDEX_ORDERS') {
        // const mergedArray = Object.values(payload.data).flat();
        const mergedArray = payload.data['A'];
        const areEqual = JSON.stringify(mergedArray) === JSON.stringify(rows.value);

        if (areEqual && !orderType.value) {
          return;
        }
        rows.value = [];
        Object.keys(payload.data).forEach(ele => {
          try {
            if (ele !== 'A') {
              return;
            }
            payload.data[ele].forEach((element: any) => {
              if (element.exeCrane == '02') {
                rows.value.push(element);
              } else {
                if (orderType.value) {
                  if (element.orderType === orderType.value) {
                    rows.value.push(element);
                  }
                } else {
                  rows.value.push(element);
                }
              }
            });
          } catch (error: any) {
            console.log(error);
          }
        });
        // console.log('rows.value', rows.value);
      }
    });

    watchEffect(() => {
      if (rows.value) {
        const data = rows.value.filter((v: any) => v.orderStatus == '11');
        if (data && data.length >= 1) {
          stores.orderStatus = data[0].orderStatus;
          stores.posx = data[0].frX;
          stores.posy = data[0].frY;
        } else {
          const data = rows.value.filter((v: any) => v.orderStatus == '13');
          if (data && data.length >= 1) {
            stores.orderStatus = data[0].orderStatus;
            stores.posx = data[0].toX;
            stores.posy = data[0].toY;
          } else {
            stores.orderStatus = '';
            stores.posx = 0;
            stores.posy = 0;
          }
        }
      } else {
        stores.orderStatus = '';
        stores.posx = 0;
        stores.posy = 0;
      }
    });

    return { tableId, toolbarId, tableHeight, rows };
  },
});
</script>
